<!DOCTYPE html>
<html lang="en" style="background-color:#ffffff">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的等级</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css"/>
    <style>
      .level-status{
        position:absolute;
        top:0px;
        border:1px solid #ffffff;
        color:#ffffff;
        padding:3px;
        font-size:12px;
        margin: 5px
      }
      .level_requirements{
        height: auto;
      }

      .condition-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }

      .condition-box .top-box{
        font-size: 14px;
        height: 35px;
        margin: 10px 0 10px 10px;
      }
      .condition-box .center-box{
        font-size: 12px;
        margin: 0 0 20px 10px;
        color: #999;
      }

      .condition-box .bottom-box2 {
        display: inline-block;
        width: 100%;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #F39700;
        border-top: 1px solid #fff;
      }
      .condition-box .bottom-box1{
        width: 100%;
        line-height: 40px;
        text-align: center;
        color: #999;
        border-top: 1px solid #fff;
        background-color: #F7F4F2;
        vertical-align: middle;
      }
      [class|=task]{
      	overflow: hidden;
        border-radius: 5px;
        background-color: #F7F4F2;
        width:46%;
        margin-top: 20px;
      }
    </style>
</head>
<body style="height:100%;background-color:#fff">
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">我的等级</span>
</div>
<div id="app" class="top-container" v-cloak>
  <!-- <div style="text-align:center;margin-top:5px;font-size:14px;color:#333">你的等级信息还有<span id="time_circle"></span>更新</div> -->

  <div class="swiper-container" style="padding-top:15px">
    <div class="swiper-wrapper" >
        <div class="swiper-slide" v-for="(memberType, index) in memberTypes">
          <img :src="memberType.level_bg" width="100%" style="position:relative">
          <img v-src="'../../image/huangjin_1.png'" v-show="memberType.is_gold_l2==1" width="60px" style="position:absolute;top:20%;left:40%">
          <img v-src="'../../image/huangjin_2.png'" v-show="memberType.is_gold_l3==1" width="60px" style="position:absolute;top:20%;left:40%">
          <span class="level-status" v-show="cur_level_id!=memberType.level_id">{{memberType.is_done==1?'已解锁':'未解锁'}}</span>
          <span class="level-status" v-show="cur_level_id==memberType.level_id">当前等级</span>
        </div>
    </div>
</div>
<div class="level_requirements" v-cloak>
  <div style="text-align:center;margin:5px">等级条件</div>
  <div class="condition-box">
    <div class="task-condition1">
      <div class="top-box">自养牛数量： ≥ {{memberType.sub_cow_count_d0=='-1'?'无上限':memberType.sub_cow_count_d0}} </div>
      <div class="center-box">当前数量:{{parseInt(user.cow)}}</div>
      <a v-myclick="openpasture" class="bottom-box2" v-show="parseInt(memberType.sub_cow_count_d0) > parseInt(user.cow)" >
        去养牛 >
      </a>
      <div class="bottom-box1" v-show="parseInt(memberType.sub_cow_count_d0) <= parseInt(user.cow)">
        <img src="../../image/1_wancheng.png" alt="" style="width:13%;vertical-align:middle" />
        <span style="vertical-align:middle">已完成</span>
      </div>
    </div>
    <div class="task-condition2" >
      <div class="top-box">直接分享用户中总奶牛数：≥ {{memberType.sub_cow_count_d1}}</div>
      <div class="center-box">当前数量:{{user.sub_cow_count_d1}}</div>
      <div class="bottom-box1" v-show="parseInt(memberType.sub_cow_count_d1) <= parseInt(user.sub_cow_count_d1)">
        <img src="../../image/1_wancheng.png" alt="" style="width:13%;vertical-align:middle" />
        <span style="vertical-align:middle">已完成</span>
      </div>
      <a href="#" class="bottom-box2" v-show="parseInt(memberType.sub_cow_count_d1) > parseInt(user.sub_cow_count_d1)" v-open-win vurl="myteam">
        查看 >
      </a>
    </div>
    <div class="task-condition3" >
      <div class="top-box">团队（所有人）总奶牛数 > {{memberType.sub_cow_count_all}}</div>
      <div class="center-box">当前数量:{{user.sub_cow_count_all}}</div>
      <div class="bottom-box1" v-show="Number(memberType.sub_cow_count_all) <= Number(user.sub_cow_count_all)">
        <img src="../../image/1_wancheng.png" alt="" style="width:13%;vertical-align:middle" />
        <span style="vertical-align:middle">已完成</span>
      </div>
      <a href="#" class="bottom-box2" v-show="Number(memberType.sub_cow_count_all) > Number(user.sub_cow_count_all)" v-open-win vurl="myteam">
        查看 >
      </a>
    </div>
    <div class="task-condition4" v-show="memberType.level_id > 2" >
      <div class="top-box">直接分享用户中{{getsublevel(memberType.level_id)}}及以上等级用户数量：≥ 1 </div>
      <div class="center-box">当前数量:{{getUserSubMemberCountNumber(memberType.level_id)}}</div>
      <div class="bottom-box1"  v-show="parseInt(getUserSubMemberCountNumber(memberType.level_id)) >= 1">
        <img src="../../image/1_wancheng.png" alt="" style="width:13%;vertical-align:middle" />
        <span style="vertical-align:middle">已完成</span>
      </div>
      <a href="#" class="bottom-box2" v-show="parseInt(getUserSubMemberCountNumber(memberType.level_id)) < 1" v-open-win vurl="../user/share">
        去分享 >
      </a>
    </div>
    <div class="task-condition4" v-show="memberType.level_id <= 2" style="background-color:#fff; height:1px;"></div>
  </div>

</div>
<div class="level_rules" style="text-align:center;margin-top:20px;background-color:#fff;margin-bottom:20px">
  <div>等级权利</div>
  <div style="text-align:center;margin:5px;font-size:12px;color:#999">你必须满足条件才能享受等级权利</div>

  <div class="level_content ">
    <div >{{memberType.max_cow_count=='-1'?'无上限':memberType.max_cow_count}}</div>
    <div>自养牛数量上限</div>
  </div>
  <div class="level_content ">
    <div>{{memberType.level_id==1?0:20}}</div>
    <div>直接分享声望奖励</div>
  </div>
  <div class="level_content ">
    <div>{{memberType.level_id==1?0:4}}</div>
    <div>团队声望奖励</div>
  </div>
  <div class="level_content ">
    <div>×{{memberType.product_milk_rate}}</div>
    <div>产奶加速奖励</div>
  </div>
  <div v-show="memberType.is_gold_l2==1" class="level_content" style="background: linear-gradient(to right, #f1b501,#fce171);color:#ffffff;position:relative;border-color:#d4a30e">
    <div>3%</div>
    <div>每日全平台声望奖励</div>
    <div style="position:absolute;left:5px;padding:2px 8px;height:16px;line-height:16px;font-size:10px;background:#fdd87d;color:#f1b501;margin:0px;top:5px">永久</div>

  </div>
  <div v-show="memberType.is_gold_l3==1" class="level_content" style="background: linear-gradient(to right, #f1b501,#fce171);color:#ffffff;position:relative;border-color:#d4a30e">
    <div>1%</div>
    <div>每日全平台声望奖励</div>
    <div style="position:absolute;left:5px;padding:2px 8px;height:16px;line-height:16px;font-size:10px;background:#fdd87d;color:#f1b501;margin:0px;top:5px">永久</div>

  </div>
  <div style="clear:both"></div>
</div>

</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/swiper.js"></script>
<script>

    var user;
    var vm;
    var memberTypes;
    var memberType;
    var userMessage;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        showProgress();
          var data = {
              member_id: getPrefs('member_id')
          };
          var callback = function (ret) {
              memberTypes = ret.content;

            for(var i=0;i<memberTypes.length;i++){
              memberTypes[i].level_bg ="../../image/"+Vue.BSImg + '/' +getMemberStyle(memberTypes[i].level_id).level_bg;
            }
            level_index = getPrefs('level_id');
            memberType =  memberTypes[level_index];
              initApp();
              swiper();
              api.parseTapmode();
          };
          pinet.post(URL.getMemberLevelsInfo, data, callback);
          addListeners();
          // TimeDown('time_circle');
    };

    function initApp() {

        vm = new Vue({
            el: '#app',
            data: {
                imgPath:'../../image/',
                status:0,
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small'
                },
                memberTypes: memberTypes,
                memberType: memberType,
                cur_level_id: getPrefs('level_id'),
                user: JSON.parse(getPrefs('user')),
                bigCow: 0,
            },
            mounted:function(){
              this.getuser();
            },
            methods:{
              checkStatus:function(status){
                vm.status = status;
              },
              getsublevel:function(level_id){
                return getMemberStyle(level_id-1).level_name;
              },
              getsublevelcount:function(level,level_id){
                var key = 'sub_member_count_d1_l'+(level_id-1);
                return level[key];
              },
              getUserSubMemberCountNumber:function(level_id){
								var key = ''
								var lowUser = new Number
								for(var i = level_id - 1; i < 5; i++ ){
									if (i < 1) {
										return
									}
									key = 'sub_member_count_d1_l'+i;
									lowUser += Number(this.user[key])
								}
                return lowUser
              },
              openpasture:function(){
                var params = {to:2};
                closeWin('index');
                openWin('../../index', params, {slidBackEnabled:false,reload:true});
              },
              getuser:function(){
                var data = {
                    member_id: getPrefs('member_id')
                };
                var callback = function (ret) {
                    user = ret.content;
                    vm.user = user;
                };
                pinet.post(URL.getUserinfo, data, callback);
              }
            }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

    function swiper(){
      swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 1.5,
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 10,
        slidesOffsetBefore : 0,
        effect : 'coverflow',
        centeredSlides: true,
        coverflow: {
                    rotate: 30,
                    stretch: 10,
                    depth: 60,
                    modifier: 2,
                    slideShadows : false
                },
        onSlideChangeEnd: function(swiper){
                changeposition(swiper.activeIndex,memberTypes);
            }
    });
    var level_id  = getPrefs('level_id');
        swiper.slideTo(level_id, 2000, false);
        swiper1();
    }

    function swiper1(){
      swiper = new Swiper('.swiper-container1', {
        pagination: '.swiper-pagination',
        slidesPerView: 2,
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 10,
        slidesOffsetBefore : 0,

    });
    }

    function changeposition(index,memberTypes){
      vm.memberType = memberTypes[index];
      swiper1();
    }

    function TimeDown(id) {
     //结束时间
     // var endDate = new Date(endDateStr);
     var endDate = new Date(new Date().setHours(0, 0, 0, 0)) / 1000+24*60*60;
     //当前时间
     var nowDate = (new Date())/1000;
     //相差的总秒数
     var totalSeconds = parseInt(endDate - nowDate);
     //天数
     var days = Math.floor(totalSeconds / (60 * 60 * 24));
     //取模（余数）
     var modulo = totalSeconds % (60 * 60 * 24);
     //小时数
     var hours = Math.floor(modulo / (60 * 60));
     modulo = modulo % (60 * 60);
     //分钟
     var minutes = Math.floor(modulo / 60);
     //秒
     var seconds = modulo % 60;
     //输出到页面
     document.getElementById(id).innerHTML =  hours + ":" + minutes + ":" + seconds;
     // var time_str = hours+':'+minutes+':'+seconds;
     // vm.time_str = time_str;
     //延迟一秒执行自己
     setTimeout(function () {
         TimeDown(id);
     }, 1000)
 }

</script>
</html>
